<template>
	<view class="container">
		<view class="cut"></view>
		<view class="referees" v-if="info.name">
			<text class="tit">业务联系人信息</text>
			<text class="name">姓名：{{info.name}}</text>
			<text class="name">电话：{{info.phone}}</text>
			<text class="phone">所属服务站：{{info.agent_name}}</text>
		</view>
		<view class="cut"></view>
		<view class="step">
			<uni-steps class="stepPro" :options="radio==0?stepData1:stepData2" active-color="#57BE6A" deactiveColor="#DADADA"
			 :active="active" />
		</view>
		<!--*********************** step-1 ***********************-->
		<view class="infoBox" v-show="active == 0">
			<view class="row b-b">
				<text class="tit">姓名</text>
				<input class="input" type="text" v-model="data.user_name" placeholder="请填写姓名" placeholder-class="placeholder" />
			</view>
			<view class="row b-b">
				<text class="tit">证件号码</text>
				<input class="input" type="idcard" v-model="data.idcard" placeholder="请填写身份证号码" placeholder-class="placeholder" />
			</view>
			<view class="row b-b">
				<text class="tit">所在地区</text>
				<text @click="openAddress" class="input">
					{{data.district}}
				</text>
				<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#FBCC2B"></simple-address>
			</view>
			<view class="row addressDel b-b">
				<text class="tit">详细地址</text>
				<textarea class="textarea" auto-height="true" v-model="data.address" placeholder="请填写详细地址"></textarea>
			</view>
			<view class="row b-b">
				<text class="tit">手机号码</text>
				<input class="input" type="number" v-model="data.user_phone" placeholder="请填写手机号码" placeholder-class="placeholder" />
			</view>
		</view>
		<!--*********************** step-2 ***********************-->
		<view class="wrapperBox" v-show="active == 1">
			<view class="wrapper">
				<view class="inputBox">
					<view class="tit">付款金额</view>
					<input class="inp mon" type="number" v-model="money" placeholder="请输入付款金额" placeholder-style="font-weight:normal;font-size: 40rpx;color:#bbb"
					 @input="change" />
				</view>
				<view class="notice">付款金额最低为￥{{item.last_quota}},每次增加最小单位为￥{{item.small_pay_unit}}。</view>
			</view>
			<view class="wrapper">
				<view class="inputBox">
					<view class="tit">提货卡点</view>
					<input class="inp" disabled type="digit" v-model="freePoint" />
				</view>
			</view>
		</view>
		<!--*********************** step-3 ***********************-->
		<view class="choosePaytype" v-show="active == 2||active == 3">
			<view class="paytype" v-show="paytypeShow">
				<view class="titleBox">
					<text class="title">选择支付方式</text>
					<view class="type">
						<view class="a" @tap="radioChange(0)">
							<view class="circle" :class="radio == 0?'act':''"></view>
							<text>线上支付</text>
						</view>
						<view class="a" @tap="radioChange(1)">
							<view class="circle" :class="radio == 1?'act':''"></view>
							<text>线下支付</text>
						</view>
					</view>
				</view>
				<view class="label">
					线上支付额度一般2万~3万，小额支付可选择线上支付；若大额交易请选择线下支付,如遇支付问题请联系客服。
				</view>
			</view>
			<view v-show="radio == 0">
				<view class="cellBox">
					<view class="cell">
						<view class="left">
							<text>余额抵扣</text>
						</view>
						<evan-switch :size="18" active-color="#57BE6A" :disabled="disabled" v-model="yueChecked"></evan-switch>
					</view>
					<view class="cell" style="margin-top: 20rpx;">
						<view class="left">
							<text>余额</text>
							<text>共￥{{now_money}}</text>
							<text v-if="yueChecked">，使用￥{{yueDeduction}}，抵￥{{yueDeduction}}</text>
						</view>
						<view v-if="yueChecked&&now_money != 0" class="right" @tap="!disabled&&yueChange()">
							<text class="change">修改</text>
						</view>
					</view>
				</view>
			</view>
			<view v-show="radio == 1">
				<view class="count">
					<text class="title">平台账户信息</text>
					<view class="cell">
						<text class="a">户名：</text>
						<text class="b">{{account_bank_name}}</text>
					</view>
					<view class="cell">
						<text class="a">账 户：</text>
						<text class="b">{{platform_account}}</text>
					</view>
					<view class="cell">
						<text class="a">开户行：</text>
						<text class="b">{{account_bank}}</text>
					</view>
				</view>
				<view class="uploadCredentials">
					<text class="title">上传打款凭证</text>
					<view class="uploadBox right" v-for="(item,index) in data.payment_image" :key="index" @tap="upload_img(index)">
						<image class="licenseImg" :src="item" mode="aspectFit"></image>
					</view>
					<view class="uploadBox" v-if="data.payment_image.length < 3" @tap="upload_img()">
					</view>
					<view class="note">
						为方便工作人员审核,打款时需备注（xx代）xx预付货款
					</view>
				</view>
			</view>

		</view>
		<!-- 提交 -->
		<view class="btn" v-if="active == 2&&radio == 0" @tap="nextSubmit">立即支付</view>
		<view class="btn" v-else-if="active == 2&&radio == 1" @tap="nextSubmit">提交审核</view>
		<view class="btn gray" v-else-if="active == 3&&radio == 1">审核中</view>
		<view class="btn" v-else-if="active == 0&&orderInfo._status._type == 8" @tap="reSubmit">重新提交</view>
		<view class="btn" v-else @tap="nextSubmit">下一步</view>
		<view class="contact">
			<image src="../../../static/images/mall/hotline.png" mode=""></image>
			<text @tap="phoneCall">联系客服</text>
		</view>
		<!-- 组件 -->
		<uni-popup ref="yueChange" type="center">
			<view class="box">
				<image @tap="close" src="../../../static/images/center/close.png" mode=""></image>
				<view class="title">余额抵扣</view>
				<view class="content">
					<view class="label">
						<text>拥有余额</text>
						<text>{{now_money}}</text>
					</view>
					<view class="inputBox">
						<text>使用余额</text>
						<text>元</text>
						<input type="digit" v-model="yueDeduction" @input="yueChanged" />
					</view>
					<view @tap="close" class="boxbtn">确认</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="payConfirm" type="bottom">
			<view class="payConfirm">
				<image class="close" @tap="confirmClose" src="../../../static/images/center/close.png" mode=""></image>
				<view class="tit">支付确认</view>
				<view class="money">{{actuallyPaid}}</view>
				<view class="cell">
					<view class="a">余额抵扣 {{yueDeduction}}</view>
					<!-- #ifdef APP-PLUS -->
					<!-- app支付选择 -->
					<view class="yt-list" v-if="actuallyPaid != 0">
						<view class="pay-box">
							<block v-for="(item,index) in providerList" :key="index">
								<view class="way" @tap="chooseWay(index)">
									<view class="left">
										<image :src="item.icon" mode=""></image>
										<text>{{item.name}}</text>
									</view>
									<view :class="index == indexWay?'active':''" class="right">

									</view>
								</view>
							</block>
						</view>
					</view>
					<!-- #endif -->
				</view>
				<view class="btn confirmBtn" @tap="confirmPay">确认支付</view>
			</view>
		</uni-popup>
		<!-- 抵扣全部金额输入平台操作密码 -->
		<passkeyborad :show="keyboradShow" @close="keyboradClose" @finish="finished"></passkeyborad>
		<!-- 地址选择 -->
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#57BE6A"></simple-address>
	</view>
</template>

<script>
	import utils from "@/common/utils.js"
	import {
		deliveryCheckInfo,
		deliveryCreate,
		checkPassword,
		takedeliverydetail,
		takeDeliveryPay,
		takedeliverycancel,
		takeChangeBaseInfo
	} from "@/api/user.js"
	import {
		systemConfig
	} from "@/api/public.js"
	import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard.vue'
	import evanSwitch from "@/components/evan-switch/evan-switch.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import simpleAddress from '@/components/simple-address/simple-address.nvue'
	import wechat from '@/common/wechat.js'
	import {
		baseUrl
	} from "@/api/api.js"
	export default {
		components: {
			evanSwitch,
			uniPopup,
			passkeyborad,
			simpleAddress
		},
		data() {
			return {
				orderInfo: {
					_status: {
						_type: 0
					}
				},
				money: null,
				freePoint: 0,
				item: {},
				info: {},
				active: 0,
				paytypeShow: true,
				stepData1: [{
					title: '基本信息',
				}, {
					title: '提货卡点',
				}, {
					title: '支付方式',
				}, {
					title: '支付完成',
				}],
				stepData2: [{
					title: '基本信息',
				}, {
					title: '提货卡点',
				}, {
					title: '支付方式',
				}, {
					title: '财务审核',
				}, {
					title: '支付完成',
				}],
				data: {
					is_pay: 0,
					card_id: "",
					service_code: "",
					//#ifdef MP-WEIXIN
					from: "routine",
					//#endif
					//#ifdef APP-PLUS
					from: "app",
					//#endif
					//#ifdef H5
					from: "weixin",
					//#endif
					payType: "weixin",
					provider: "wxpay",
					total_price: 0,
					now_money: 0,
					user_name: "",
					idcard: "",
					district: "请选择地区",
					province: "",
					city: "",
					area: "",
					address: "",
					user_phone: "",
					payment_image: []
				},
				cityPickerValueDefault: [0, 0, 0],
				radio: 0,
				//线上支付
				indexWay: 0,
				providerList: [],
				now_money: uni.getStorageSync("userInfo").now_money, //用户余额
				disabled: false, //抵扣开关可切换状态
				yueChecked: false, //抵扣开关状态
				yueDeduction: 0, //抵扣金额
				actuallyPaid: 0, //抵扣后需支付金额
				keyboradShow: false, //操作密码键盘
				//线下支付
				baseUrl: "",
				account_bank_name: "",
				platform_account: "",
				account_bank: "",
				isOrder: false
			}
		},
		onLoad(option) {
			systemConfig({
				filed: 'platform_account'
			}).then(res => {
				this.platform_account = res.msg
			})
			systemConfig({
				filed: 'account_bank'
			}).then(res => {
				this.account_bank = res.msg
			})
			systemConfig({
				filed: 'account_bank_name'
			}).then(res => {
				this.account_bank_name = res.msg
			})
			if (option.orderId) {
				uni.showLoading({
					mask: true
				})
				this.isOrder = true
				takedeliverydetail({
					order_id: option.orderId
				}).then(res => {
					this.orderInfo = res.data.orderInfo
					this.info.name = this.orderInfo.contact_name
					this.info.phone = this.orderInfo.contact_phone
					this.info.agent_name = this.orderInfo.agent_name
					if (this.orderInfo._status._type == 1) {
						//待支付
						this.active = 2
						this.money = res.data.orderInfo.total_price
						this.total_price = res.data.orderInfo.total_price
						this.actuallyPaid = this.money
					} else if (this.orderInfo._status._type == 4) {
						//线下支付审核失败
						this.active = 2
						this.radio = 1
						this.paytypeShow = false
						this.data.payType = "offline"
						this.data.payment_image = this.orderInfo.payment_image.split(',')
					} else if (this.orderInfo._status._type == 3) {
						//线下支付待审核
						this.active = 3
						this.radio = 1
						this.paytypeShow = false
						this.data.payType = "offline"
						this.data.payment_image = this.orderInfo.payment_image.split(',')
					} else if (this.orderInfo._status._type == 8) {
						//提货卡购买合同审核失败
						this.stepData1 = []
						this.data.user_name = this.orderInfo.user_name
						this.data.idcard = this.orderInfo.idcard
						this.data.district = this.orderInfo.province + " " + this.orderInfo.city + " " + this.orderInfo.area
						this.data.province = this.orderInfo.province
						this.data.city = this.orderInfo.city
						this.data.area = this.orderInfo.area
						this.data.address = this.orderInfo.address
						this.data.user_phone = this.orderInfo.user_phone
					}
				})
			}
			this.baseUrl = baseUrl()
			if (option.item && option.info) {
				this.item = JSON.parse(decodeURIComponent(option.item))
				this.info = JSON.parse(decodeURIComponent(option.info))
				this.data.card_id = this.item.id
				this.data.service_code = this.info.service_code
			}
			if (this.now_money != 0) {
				this.disabled = false
			} else {
				this.disabled = true
			}
			if (uni.getStorageSync("available_alipay") == 0) {
				this.providerList = [{
					name: "微信支付",
					icon: "/static/images/public/weixin.png",
					payType: "weixin",
					provider: "wxpay"
				}]
			} else {
				this.providerList = [{
						name: "微信支付",
						icon: "/static/images/public/weixin.png",
						payType: "weixin",
						provider: "wxpay"
					},
					{
						name: "支付宝支付",
						icon: "/static/images/public/alipay.png",
						payType: "alipay",
						provider: "alipay"
					}
				]
			}
		},
		onBackPress(e) {
			if (this.active > 0 && !this.isOrder && e.from == "backbutton") {
				this.active--
				return true;
			}
		},
		watch: {
			yueChecked: {
				deep: true,
				handler(val, oldval) {
					this.changeYue();
				}
			}
		},
		methods: {
			phoneCall() {
				uni.makePhoneCall({
					phoneNumber: uni.getStorageSync("siteSerPhone")
				})
			},
			// ***************step-1****************
			openAddress() {
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				this.data.district = e.label.replace(/-/g, " ");
				let arrAdd = e.label.split('-');
				this.data.province = arrAdd[0];
				this.data.city = arrAdd[1];
				this.data.area = arrAdd[2];
			},
			// ***************step-2****************
			change(e) {
				this.money = e.target.value
				this.actuallyPaid = e.target.value
				this.data.total_price = e.target.value
				// 计算卡点
				this.freePoint = parseInt(e.target.value * Number(this.item.rebate))
			},
			// ***************step-3****************
			radioChange(idx) {
				this.radio = idx
				if (idx == 1) {
					this.data.payType = "offline"
				} else {
					if (this.indexWay == 0) {
						this.data.payType = "weixin"
					} else {
						this.data.payType = "alipay"
					}
				}
			},
			//切换支付方式
			chooseWay(index) {
				this.indexWay = index
				this.data.payType = this.providerList[index].payType
				this.data.provider = this.providerList[index].provider
			},
			// 切换抵扣开关
			changeYue() {
				let payable = Number(this.money)
				let now_money = Number(this.now_money)
				if (this.yueChecked) {
					if (payable >= now_money) {
						this.yueDeduction = now_money
						this.actuallyPaid = (payable - this.yueDeduction).toFixed(2)
					} else {
						this.yueDeduction = payable
						this.actuallyPaid = 0
					}
				} else {
					this.yueDeduction = 0
					this.actuallyPaid = payable
				}
			},
			// 修改抵扣金额
			yueChanged() {
				let payable = Number(this.money)
				let now_money = Number(this.now_money)
				this.$nextTick(function() {
					this.yueDeduction = utils.verifyNum(this.yueDeduction)
					if (now_money > payable) {
						if (Number(this.yueDeduction) > payable) {
							uni.showToast({
								icon: "none",
								title: "不能超过需支付金额"
							})
							this.yueDeduction = payable
							this.actuallyPaid = 0
						} else {
							this.actuallyPaid = (payable - this.yueDeduction).toFixed(2)
						}
					} else {
						if (Number(this.yueDeduction) > now_money) {
							uni.showToast({
								icon: "none",
								title: "不能超过余额"
							})
							this.yueDeduction = now_money
							this.actuallyPaid = (payable - this.yueDeduction).toFixed(2)
						} else {
							this.actuallyPaid = (payable - this.yueDeduction).toFixed(2)
						}
					}
				})
			},
			//打开修改抵扣面板
			yueChange() {
				this.$refs.yueChange.open()
			},
			//关闭修改抵扣面板
			close() {
				this.$refs.yueChange.close()
			},
			//上传图片
			upload_img(ind) {
				let _this = this;
				let token = uni.getStorageSync("Authori-zation");
				uni.chooseImage({
					count: 1,
					sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						uni.showLoading({
							mask: true,
							title: "上传中"
						})
						//因为有一张图片， 输出下标[0]， 直接输出地址
						var imgFiles = res.tempFilePaths[0];
						//#ifdef H5
						utils.imgCompress(imgFiles).then(re => {
							imgFiles = re
							//#endif
							uni.uploadFile({
								// 需要上传的地址
								url: _this.baseUrl + "/upload/image",
								header: {
									"Authori-zation": "Bearer " + token
								},
								// filePath  需要上传的文件
								filePath: imgFiles,
								name: "file",
								success(_res) {
									uni.hideLoading()
									var res = JSON.parse(_res.data);
									if (_res.statusCode === 200 && res.status === 200) {
										if (ind == undefined) {
											let length_index = _this.data.payment_image.length;
											_this.data.payment_image.splice(length_index, 1, res.data.url)
										} else {
											_this.data.payment_image.splice(ind, 1, res.data.url)
										}
									} else {
										uni.showToast({
											title: "图片过大,上传失败"
										});
									}
								}
							});
							//#ifdef H5
						})
						//#endif
					}
				});
			},
			// ***************下一步/提交****************
			nextSubmit() {
				if (this.active == 0) {
					// 第一步
					uni.showLoading({
						mask: true
					})
					deliveryCheckInfo(this.data).then(res => {
						this.active++
					})
				} else if (this.active == 1) {
					// 第二步
					if (this.money < this.item.last_quota) {
						return uni.showModal({
							content: "支付金额不能小于￥" + this.item.last_quota,
							showCancel: false,
							confirmColor: "#FBC866"
						})
					}
					let num = this.money % this.item.small_pay_unit
					if (num != 0) {
						return uni.showModal({
							content: "支付金额最小单位必须为" + this.item.small_pay_unit,
							showCancel: false,
							confirmColor: "#FBC866"
						})
					}
					uni.showLoading({
						mask: true
					})
					deliveryCreate(this.data).then(res => {
						uni.hideLoading()
						this.orderInfo = res.data.result
						this.active++
					})
				} else if (this.active == 2) {
					if (this.radio == 1) {
						//第三步线下支付
						this.submit()
					} else {
						//第三步线上支付
						this.confirmShow()
					}
				}
			},
			//打开支付确认面板
			confirmShow() {
				this.$refs.payConfirm.open()
			},
			//关闭支付确认面板
			confirmClose() {
				this.$refs.payConfirm.close()
			},
			confirmPay() {
				if (this.actuallyPaid == 0) {
					if (!uni.getStorageSync("userInfo").withdraw_pass) {
						uni.showModal({
							content: "0元支付需设置操作密码",
							confirmText: "去设置",
							cancelText: "取消",
							confirmColor: "#FBC866",
							success(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: "/pages/center/accountSet/payPassword/payPassword?backurl=true"
									})
								} else if (res.cancel) {}

							}
						})
						return
					}
					this.keyboradShow = true
					this.confirmClose()
				} else {
					this.submit()
				}
			},
			//操作密码验证
			finished(password) {
				uni.showLoading({
					mask: true
				})
				checkPassword({
					password: password
				}, this.keyboradClose()).then(res => {
					this.submit()
				})
			},
			//关闭操作密码键盘
			keyboradClose() {
				this.keyboradShow = false
			},
			submit() {
				uni.showLoading({
					mask: true
				})
				let payment_image = this.data.payment_image.toString()
				takeDeliveryPay({
					order_id: this.orderInfo.order_id,
					//#ifdef MP-WEIXIN
					from: "routine",
					//#endif
					//#ifdef APP-PLUS
					from: "app",
					//#endif
					//#ifdef H5
					from: "weixin",
					//#endif
					payType: this.data.payType,
					img: payment_image,
					now_money: this.yueDeduction
				}).then(res => {
					uni.hideLoading()
					if (this.data.payType == "offline") {
						//线下支付
						uni.showToast({
							icon: "none",
							title: res.msg,
							duration: 600
						})
						setTimeout(function() {
							uni.navigateBack()
						}, 600)
					} else {
						//线上支付
						this.confirmClose()
						if (res.data.status == "ZERO_SUCCESS") {
							uni.showToast({
								title: "支付成功"
							})
							let _this = this
							setTimeout(function() {
								uni.redirectTo({
									url: "./pickCardPaySuccess?count=" + res.data.result.card_value + "&money=" + res.data.result.total_price + "&orderId=" +
										res.data.result.order_id + "&type=1"
								})
							}, 300);
						} else if (res.data.status == "WECHAT_PAY" || res.data.status == "ALIPAY") {
							// #ifdef MP-WEIXIN
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.result.jsConfig.timestamp,
								nonceStr: res.data.result.jsConfig.nonceStr,
								package: res.data.result.jsConfig.package,
								signType: res.data.result.jsConfig.signType,
								paySign: res.data.result.jsConfig.paySign,
								success: function(re) {
									uni.redirectTo({
										url: "./pickCardPaySuccess?count=" + res.data.result.card_value + "&money=" + res.data.result.total_price + "&orderId=" +
											res.data.result.order_id + "&type=1"
									})
								},
								fail: function(err) {
									uni.navigateBack({

									})
								}
							});
							// #endif
							// #ifdef APP-PLUS
							let _this = this
							uni.requestPayment({
								provider: this.data.provider,
								orderInfo: res.data.result.jsConfig,
								success: function(re) {
									uni.redirectTo({
										url: "./pickCardPaySuccess?count=" + res.data.result.card_value + "&money=" + res.data.result.total_price +
											"&orderId=" +
											res.data.result.order_id + "&type=1"
									})
								},
								fail: function(err) {
									uni.navigateBack({

									})
								}
							});
							// #endif
							//#ifdef H5
							// h5支付
							let url = "./pickCardPaySuccess?count=" + res.data.result.card_value + "&money=" + res.data.result.total_price + "&orderId=" +
								res.data.result.order_id + "&type=1"
							wechat.pay(res.data.result.jsConfig, url, false, true)
							//#endif
						}
					}
				})
			},
			reSubmit() {
				uni.showLoading({
					mask: true
				})
				takeChangeBaseInfo({
					order_id: this.orderInfo.order_id,
					user_name: this.data.user_name,
					user_phone: this.data.user_phone,
					idcard: this.data.idcard,
					province: this.data.province,
					city: this.data.city,
					area: this.data.area,
					address: this.data.address
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: res.msg,
						duration: 600
					})
					let _this = this
					setTimeout(function() {
						uni.redirectTo({
							url: "./pickCardPaySuccess?orderId=" + _this.orderInfo.order_id + "&type=2"
						})
					}, 600)
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #fafafa;
	}
</style>
<style lang="scss" scoped>
	.container {
		.cut {
			width: 750rpx;
			height: 24rpx;
			background: #fafafa;
		}

		.referees {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 8rpx;
			color: #333;
			display: flex;
			flex-direction: column;

			.tit {
				font-size: 28rpx;
			}

			.name,
			.phone {
				margin-top: 20rpx;
				font-size: 30rpx;
				font-weight: bold;

				&:before {
					margin-right: 10rpx;
					content: '·';
					font-weight: bold;
					color: #FACF3C;
				}
			}
		}

		.step {
			background-color: #fff;
			padding: 20rpx 0;
		}

		.infoBox {
			background: #fff;
			padding: 0 30rpx;

			.row {
				display: flex;
				align-items: center;
				position: relative;
				padding: 0 10rpx;
				height: 100rpx;

				.tit {
					flex-shrink: 0;
					width: 160rpx;
					font-size: 30rpx;
					color: #303133;
				}

				.input {
					flex: 1;
					font-size: 30rpx;
					font-weight: 500;
					color: #303133;
				}

				.textarea {
					min-height: 90rpx;
					color: #303133;
					text-align: justify;
				}

				.icon-shouhuodizhi {
					font-size: 48rpx;
					color: $mall-price;
				}
			}

			.addressDel {
				padding: 30rpx 10rpx;
				height: auto;
				align-items: flex-start;
			}
		}

		.wrapperBox {
			padding-bottom: 30rpx;
			background: #fff;

			.wrapper {
				padding: 15rpx 30rpx;

				.inputBox {
					display: flex;
					align-items: baseline;
					border-bottom: 1rpx #eee solid;

					.tit {
						min-width: 150rpx;
						font-size: 30rpx;
						color: #666666;
					}

					.inp {
						flex: 1;
						font-size: 60rpx;
						font-weight: bold;
					}

					.mon {
						position: relative;
						padding-left: 50rpx;
					}

					.mon::before {
						content: '￥';
						position: absolute;
						bottom: 14rpx;
						left: 0rpx;
						font-size: 40rpx;
						line-height: 40rpx;
					}
				}

				.notice {
					padding: 20rpx 0;
					font-size: 20rpx;
					color: rgba(153, 153, 153, 1);
				}
			}
		}

		.choosePaytype {
			padding: 30rpx;
			background: #fff;

			.paytype {
				.titleBox {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title {
						font-size: 30rpx;
						color: #666666;
					}

					.type {
						display: flex;
						align-items: center;

						.a {
							display: flex;
							align-items: center;
							margin-left: 40rpx;

							.circle {
								width: 30rpx;
								height: 30rpx;
								box-sizing: border-box;
								border-radius: 50%;
								box-shadow: 0 0 0 4rpx #eee;
								margin-right: 16rpx;
							}

							.act {
								background: #57BE6A;
								border: 6rpx solid #fff;
								box-shadow: 0 0 0 4rpx #57BE6A;
							}

							text {
								font-size: 30rpx;
								font-weight: 500;
								color: #333333;
							}
						}
					}
				}

				.label {
					margin-top: 30rpx;
					background: #FAFAFA;
					line-height: 40rpx;
					border: 2rpx dashed #EEEEEE;
					padding: 20rpx;
					text-align: justify;
					font-size: 24rpx;
					color: #666666;
				}
			}
		}

		.cellBox {
			background-color: #fff;
			padding: 30rpx 0;

			.cell {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 66rpx;

				.left {
					text {
						font-size: 22rpx;
						font-weight: bold;
						color: rgba(51, 51, 51, 1);
					}

					image {
						width: 20rpx;
						height: 15rpx;
						margin: 0 4rpx;
					}

					text:nth-of-type(1) {
						font-size: 28rpx;
						font-weight: normal;
						margin-right: 10rpx;
					}
				}

				.right {
					image {
						width: 33rpx;
						height: 24rpx;
						margin-right: 6rpx;
					}

					.num {
						font-size: 26rpx;
						font-weight: bold;
						color: $theme-color;
					}

					.change {
						display: block;
						font-size: 24rpx;
						color: rgba(51, 51, 51, 1);
						width: 90rpx;
						height: 44rpx;
						line-height: 44rpx;
						border-radius: 22rpx;
						text-align: center;
						background-color: #e5e5e5;
					}
				}

				.switch {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

		.count {
			margin-top: 40rpx;

			.title {
				font-size: 30rpx;
				color: #666666;
			}

			.cell {
				display: flex;
				padding-left: 26rpx;
				font-size: 30rpx;
				margin-top: 20rpx;
				color: #333333;

				.a {
					min-width: 130rpx;
				}

				.b {
					font-weight: 600;
				}
			}
		}

		.uploadCredentials {
			margin-top: 40rpx;

			.title {
				font-size: 30rpx;
				color: #666666;
			}

			.uploadBox {
				margin-top: 30rpx;
				width: 690rpx;
				height: 290rpx;
				background-color: #FAFAFA;
				background-image: url(../../../static/images/center/camera.png);
				background-repeat: no-repeat;
				background-size: 66rpx 54rpx;
				background-position: center center;
				border: 2rpx dashed #DEDEDE;
				border-radius: 8rpx;

				.licenseImg {
					width: 690rpx;
					height: 290rpx;
				}
			}

			.note {
				margin-top: 40rpx;
				font-size: 24rpx;
				text-align: justify;
				background-color: #fafafa;
				padding: 20rpx;
				color: #666;
				border-radius: 10rpx;
			}
		}

	}

	.contact {
		display: flex;
		justify-content: center;
		padding: 30rpx;

		image {
			width: 40rpx;
			height: 41rpx;
			margin-right: 14rpx;
		}

		text {
			font-size: 32rpx;
			color: #666;
		}
	}

	.btn {
		margin: 80rpx auto 30rpx;
		width: 600rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: linear-gradient(90deg, #FBCC2B 0%, #FBDC72 100%);
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		line-height: 80rpx;
		text-align: center;
	}

	.gray {
		color: #999;
		background: #FBDC72;
	}

	.box {
		background-color: #fff;
		position: relative;
		width: 600rpx;
		padding: 36rpx;
		box-sizing: border-box;
		border-radius: 10rpx;

		image {
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			width: 26rpx;
			height: 26rpx;
			padding: 30rpx;
		}

		.title {
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
		}

		.content {
			.label {
				display: flex;
				justify-content: center;
				font-size: 28rpx;
				color: #333;
				margin-top: 46rpx;
				align-items: center;

				text:nth-of-type(2) {
					margin-left: 8rpx;
					font-weight: bold;
				}
			}

			.inputBox {
				position: relative;
				height: 114rpx;
				line-height: 114rpx;
				border-bottom: 1rpx solid #eee;

				text:nth-of-type(1) {
					font-size: 28rpx;
					position: absolute;
					top: 0;
					left: 0;
				}

				text:nth-of-type(2) {
					font-size: 28rpx;
					position: absolute;
					top: 0;
					right: 0;
				}

				input {
					height: 114rpx;
					text-align: right;
					padding-right: 58rpx;
					font-size: 56rpx;
				}
			}

			.boxbtn {
				margin: 40rpx 0 0;
				width: 528rpx;
				height: 80rpx;
				background: #57BE6A;
				border-radius: 40rpx;
				color: #fff;
				line-height: 80rpx;
				text-align: center;
			}
		}

	}

	.payConfirm {
		position: relative;
		width: 750rpx;
		height: 75vh;
		padding: 50rpx 75rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0px 0px;
		text-align: center;
		color: rgba(51, 51, 51, 1);

		.close {
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			width: 26rpx;
			height: 26rpx;
			padding: 30rpx;
		}

		.tit {
			font-size: 36rpx;
			font-weight: 500;
		}

		.money {
			margin: 120rpx 0 100rpx;
			font-size: 72rpx;
			font-weight: bold;

			&:before {
				content: '￥';
				font-size: 40rpx;
				font-weight: normal;
			}
		}

		.cell {
			font-size: 28rpx;

			.a {
				display: flex;
				height: 100rpx;
				justify-content: space-between;
				align-items: center;
			}

			.yt-list {
				margin-top: 16rpx;
				background: #fff;

				.pay-box {

					.way {
						padding: 10rpx 0 10rpx;
						line-height: 70rpx;
						font-size: 26rpx;
						width: 100%;
						box-sizing: border-box;
						border-bottom: 1rpx solid #f5f5f5;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left {
							display: flex;
							align-items: center;

							image {
								width: 50rpx;
								height: 50rpx;
								margin-right: 10rpx;
							}
						}

						.right {
							width: 32rpx;
							height: 32rpx;
							border-radius: 50%;
							box-sizing: border-box;
							border: 6rpx solid #fff;
							box-shadow: 0 0 0 4rpx #f5f5f5;
						}

						.active {
							background-color: #57BE6A;
							box-shadow: 0 0 0 2rpx #57BE6A;
						}
					}
				}
			}
		}

		.confirmBtn {
			position: absolute;
			margin: 0;
			left: 75rpx;
			bottom: 70rpx;
			bottom: calc(env(safe-area-inset-bottom) + 70rpx);
		}
	}
</style>
